<template>
	<view class="bottom-box-uni flex_cc" :class="{ fixed: prop.fixed }">
		<view v-for="(but, index) in prop.buts" :key="index">
			<view
				v-if="but.type === 'empty'"
				class="button"
				:class="{ 'uni-ml-40': index }"
				:style="{
					border: `2rpx solid ${but.color}`,
					color: but.color,
					width: (but.width || 640) + 'rpx',
					background: but.bgColor
				}"
				@click="change(index)"
			>
				{{ but.label }}
			</view>
			<view
				v-else
				class="button"
				:class="[index ? 'uni-ml-40' : '', but.bgColor.indexOf('#') === 0 ? '' : but.bgColor]"
				:style="{
					background: but.bgColor.indexOf('#') === 0 ? but.bgColor : '',
					width: (but.width || 640) + 'rpx'
				}"
				@click="change(index)"
			>
				{{ but.label }}
			</view>
		</view>
	</view>
	<view v-if="prop.fixed && interval" class="interval" :style="{ background: prop.intervalBg }"></view>
</template>
<script setup>
const prop = defineProps({
	fixed: {
		type: Boolean,
		default: true
	},
	buts: {
		type: Array,
		default: () => []
	},
	intervalBg: {
		type: String,
		default: 'transparent'
	},
	interval: {
		type: Boolean,
		default: true
	}
});

const emit = defineEmits(['change']);

function change(index) {
	emit('change', index);
}
</script>
<style scoped lang="scss">
.bottom-box-uni {
	width: 100vw;
	height: 112rpx;
	border-top: 2rpx solid $uni-F5F5F5;
	background: $uni-white;

	.button {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: $uni-white;
		border-radius: 16rpx;
		font-size: 32rpx;
	}
}

.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
}

.interval {
	height: 144rpx;
}
</style>
